<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>VUE3 随堂面试题 | 一切只为就业</title>
    <meta name="generator" content="VuePress 1.9.9">
    <link rel="icon" href="/renzi_89/favicon.ico">
    <link rel="apple-touch-icon" href="/renzi_89/apple-touch-icon.png">
    <meta name="description" content="">
    <meta name="referrer" content="no-referrer">
    
    <link rel="preload" href="/renzi_89/assets/css/0.styles.2bce678d.css" as="style"><link rel="preload" href="/renzi_89/assets/js/app.a378f438.js" as="script"><link rel="preload" href="/renzi_89/assets/js/3.2ef7cd9f.js" as="script"><link rel="preload" href="/renzi_89/assets/js/24.51725349.js" as="script"><link rel="prefetch" href="/renzi_89/assets/js/10.537dba2f.js"><link rel="prefetch" href="/renzi_89/assets/js/11.777d59f7.js"><link rel="prefetch" href="/renzi_89/assets/js/12.3aa27d8a.js"><link rel="prefetch" href="/renzi_89/assets/js/13.174d629f.js"><link rel="prefetch" href="/renzi_89/assets/js/14.359eface.js"><link rel="prefetch" href="/renzi_89/assets/js/15.28c41def.js"><link rel="prefetch" href="/renzi_89/assets/js/16.fb785696.js"><link rel="prefetch" href="/renzi_89/assets/js/17.cb0a36ba.js"><link rel="prefetch" href="/renzi_89/assets/js/18.9c5df806.js"><link rel="prefetch" href="/renzi_89/assets/js/19.2b9d3dfc.js"><link rel="prefetch" href="/renzi_89/assets/js/2.af70fa7a.js"><link rel="prefetch" href="/renzi_89/assets/js/20.a6b56611.js"><link rel="prefetch" href="/renzi_89/assets/js/21.a1c53edf.js"><link rel="prefetch" href="/renzi_89/assets/js/22.8f1dfff9.js"><link rel="prefetch" href="/renzi_89/assets/js/23.517f9b15.js"><link rel="prefetch" href="/renzi_89/assets/js/25.a8466485.js"><link rel="prefetch" href="/renzi_89/assets/js/26.a63a128f.js"><link rel="prefetch" href="/renzi_89/assets/js/27.f9af77ae.js"><link rel="prefetch" href="/renzi_89/assets/js/28.a116071d.js"><link rel="prefetch" href="/renzi_89/assets/js/29.6e2ab161.js"><link rel="prefetch" href="/renzi_89/assets/js/30.8ed301ad.js"><link rel="prefetch" href="/renzi_89/assets/js/31.c8ccc7e7.js"><link rel="prefetch" href="/renzi_89/assets/js/32.50f06c6d.js"><link rel="prefetch" href="/renzi_89/assets/js/33.1da2c11d.js"><link rel="prefetch" href="/renzi_89/assets/js/34.5f05cbec.js"><link rel="prefetch" href="/renzi_89/assets/js/35.ca54b9a0.js"><link rel="prefetch" href="/renzi_89/assets/js/36.c4af064d.js"><link rel="prefetch" href="/renzi_89/assets/js/37.64f512c3.js"><link rel="prefetch" href="/renzi_89/assets/js/38.13face63.js"><link rel="prefetch" href="/renzi_89/assets/js/39.0fe48580.js"><link rel="prefetch" href="/renzi_89/assets/js/4.7ac18f02.js"><link rel="prefetch" href="/renzi_89/assets/js/40.e28bfea0.js"><link rel="prefetch" href="/renzi_89/assets/js/41.cd995098.js"><link rel="prefetch" href="/renzi_89/assets/js/42.10e9c69f.js"><link rel="prefetch" href="/renzi_89/assets/js/43.51ae3f08.js"><link rel="prefetch" href="/renzi_89/assets/js/44.aae27af0.js"><link rel="prefetch" href="/renzi_89/assets/js/45.e5aaa360.js"><link rel="prefetch" href="/renzi_89/assets/js/46.9931d201.js"><link rel="prefetch" href="/renzi_89/assets/js/5.599b9c30.js"><link rel="prefetch" href="/renzi_89/assets/js/6.68c51d9b.js"><link rel="prefetch" href="/renzi_89/assets/js/7.32283c1c.js"><link rel="prefetch" href="/renzi_89/assets/js/8.f2ca5c2a.js"><link rel="prefetch" href="/renzi_89/assets/js/9.b17a1374.js">
    <link rel="stylesheet" href="/renzi_89/assets/css/0.styles.2bce678d.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/renzi_89/" class="home-link router-link-active"><img src="/renzi_89/doraameng.jpg" alt="一切只为就业" class="logo"> <span class="site-name can-hide">一切只为就业</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/renzi_89/vue/" class="nav-link">
  vue基础
</a></div><div class="nav-item"><a href="/renzi_89/rz/" class="nav-link">
  人资笔记
</a></div><div class="nav-item"><a href="/renzi_89/xcx/" class="nav-link">
  小程序
</a></div><div class="nav-item"><a href="/renzi_89/vue3ts/" class="nav-link">
  Vue3+TS
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="vue资源网站" class="dropdown-title"><span class="title">vue资源网站</span> <span class="arrow down"></span></button> <button type="button" aria-label="vue资源网站" class="mobile-dropdown-title"><span class="title">vue资源网站</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          人资相关网站
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://www.apifox.cn/apidoc/shared-e2644216-aad4-4529-a630-78f0631ab076/api-49562537" target="_blank" rel="noopener noreferrer" class="nav-link external">
  人资接口文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://gitee.com/errlei/rz_89" target="_blank" rel="noopener noreferrer" class="nav-link external">
  老师上课码云地址
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://heimahr.itheima.net/login" target="_blank" rel="noopener noreferrer" class="nav-link external">
  人资预览网站
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://heimahr-t.itheima.net/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  人资预览备用网站
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://www.zhixi.com/share/305d8208" target="_blank" rel="noopener noreferrer" class="nav-link external">
  检查大家每日收获网站
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://panjiachen.gitee.io/vue-element-admin/#/login" target="_blank" rel="noopener noreferrer" class="nav-link external">
  element项目预览网站
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://panjiachen.gitee.io/vue-admin-template/#/login" target="_blank" rel="noopener noreferrer" class="nav-link external">
  我们项目使用的模板网站
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li><li class="dropdown-item"><h4>
          vue全家桶官网
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://v2.cn.vuejs.org/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vue2
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://v3.router.vuejs.org/zh/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vue Router
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://v3.vuex.vuejs.org/zh/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  VueX
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://axios-http.com/zh/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Axios官网
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="http://chengqige.com/axios/#/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Axios私人网站
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://element.eleme.cn/#/zh-CN" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Element UI
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li><li class="dropdown-item"><h4>
          工具网站
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://crxdl.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  谷歌插件
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://www.axureshop.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  产品原型网
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="小程序资源网站" class="dropdown-title"><span class="title">小程序资源网站</span> <span class="arrow down"></span></button> <button type="button" aria-label="小程序资源网站" class="mobile-dropdown-title"><span class="title">小程序资源网站</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          原生小程序
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://mp.weixin.qq.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  微信公众平台-登录
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  小程序开发文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://apifox.com/apidoc/shared-8d66c345-7a9a-4844-9a5a-1201852f6faa/doc-1492243" target="_blank" rel="noopener noreferrer" class="nav-link external">
  小程序接口文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://vant-contrib.gitee.io/vant-weapp/#/home" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vant Weapp
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://www.zhixi.com/share/305d8208" target="_blank" rel="noopener noreferrer" class="nav-link external">
  在线思维导图
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://opendocs.alipay.com/mini/introduce" target="_blank" rel="noopener noreferrer" class="nav-link external">
  支付宝小程序开发文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://developer.open-douyin.com/docs/resource/zh-CN/mini-app/develop/guide/introduction" target="_blank" rel="noopener noreferrer" class="nav-link external">
  抖音小程序开发文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li><li class="dropdown-item"><h4>
          uni-app小程序
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://www.showdoc.com.cn/128719739414963/2513235043485226" target="_blank" rel="noopener noreferrer" class="nav-link external">
  接口文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://uniapp.dcloud.net.cn/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  uni-app小程序
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://www.uviewui.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  uView
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="vue3周边网站" class="dropdown-title"><span class="title">vue3周边网站</span> <span class="arrow down"></span></button> <button type="button" aria-label="vue3周边网站" class="mobile-dropdown-title"><span class="title">vue3周边网站</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://cn.vuejs.org/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vue 3官网
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://cn.vitejs.dev/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vite 脚手架官网
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://router.vuejs.org/zh/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vue Router 4.x 路由
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://vuex.vuejs.org/zh/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vuex 4.x状态管理
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://pinia.vuejs.org/zh/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  pinia 新状态管理
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://element-plus.org/zh-CN/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Element Plus UI库
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://vant-contrib.gitee.io/vant/#/zh-CN" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vant 4 H5 UI库
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://www.typescriptlang.org/zh/play" target="_blank" rel="noopener noreferrer" class="nav-link external">
  TS演练场
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://ts.xcatliu.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  TS自学网站
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div><div class="nav-item"><a href="/renzi_89/interview/" class="nav-link router-link-active">
  Vue3面试题
</a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/renzi_89/vue/" class="nav-link">
  vue基础
</a></div><div class="nav-item"><a href="/renzi_89/rz/" class="nav-link">
  人资笔记
</a></div><div class="nav-item"><a href="/renzi_89/xcx/" class="nav-link">
  小程序
</a></div><div class="nav-item"><a href="/renzi_89/vue3ts/" class="nav-link">
  Vue3+TS
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="vue资源网站" class="dropdown-title"><span class="title">vue资源网站</span> <span class="arrow down"></span></button> <button type="button" aria-label="vue资源网站" class="mobile-dropdown-title"><span class="title">vue资源网站</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          人资相关网站
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://www.apifox.cn/apidoc/shared-e2644216-aad4-4529-a630-78f0631ab076/api-49562537" target="_blank" rel="noopener noreferrer" class="nav-link external">
  人资接口文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://gitee.com/errlei/rz_89" target="_blank" rel="noopener noreferrer" class="nav-link external">
  老师上课码云地址
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://heimahr.itheima.net/login" target="_blank" rel="noopener noreferrer" class="nav-link external">
  人资预览网站
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://heimahr-t.itheima.net/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  人资预览备用网站
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://www.zhixi.com/share/305d8208" target="_blank" rel="noopener noreferrer" class="nav-link external">
  检查大家每日收获网站
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://panjiachen.gitee.io/vue-element-admin/#/login" target="_blank" rel="noopener noreferrer" class="nav-link external">
  element项目预览网站
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://panjiachen.gitee.io/vue-admin-template/#/login" target="_blank" rel="noopener noreferrer" class="nav-link external">
  我们项目使用的模板网站
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li><li class="dropdown-item"><h4>
          vue全家桶官网
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://v2.cn.vuejs.org/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vue2
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://v3.router.vuejs.org/zh/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vue Router
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://v3.vuex.vuejs.org/zh/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  VueX
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://axios-http.com/zh/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Axios官网
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="http://chengqige.com/axios/#/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Axios私人网站
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://element.eleme.cn/#/zh-CN" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Element UI
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li><li class="dropdown-item"><h4>
          工具网站
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://crxdl.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  谷歌插件
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://www.axureshop.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  产品原型网
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="小程序资源网站" class="dropdown-title"><span class="title">小程序资源网站</span> <span class="arrow down"></span></button> <button type="button" aria-label="小程序资源网站" class="mobile-dropdown-title"><span class="title">小程序资源网站</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          原生小程序
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://mp.weixin.qq.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  微信公众平台-登录
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  小程序开发文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://apifox.com/apidoc/shared-8d66c345-7a9a-4844-9a5a-1201852f6faa/doc-1492243" target="_blank" rel="noopener noreferrer" class="nav-link external">
  小程序接口文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://vant-contrib.gitee.io/vant-weapp/#/home" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vant Weapp
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://www.zhixi.com/share/305d8208" target="_blank" rel="noopener noreferrer" class="nav-link external">
  在线思维导图
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://opendocs.alipay.com/mini/introduce" target="_blank" rel="noopener noreferrer" class="nav-link external">
  支付宝小程序开发文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://developer.open-douyin.com/docs/resource/zh-CN/mini-app/develop/guide/introduction" target="_blank" rel="noopener noreferrer" class="nav-link external">
  抖音小程序开发文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li><li class="dropdown-item"><h4>
          uni-app小程序
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://www.showdoc.com.cn/128719739414963/2513235043485226" target="_blank" rel="noopener noreferrer" class="nav-link external">
  接口文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://uniapp.dcloud.net.cn/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  uni-app小程序
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://www.uviewui.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  uView
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="vue3周边网站" class="dropdown-title"><span class="title">vue3周边网站</span> <span class="arrow down"></span></button> <button type="button" aria-label="vue3周边网站" class="mobile-dropdown-title"><span class="title">vue3周边网站</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://cn.vuejs.org/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vue 3官网
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://cn.vitejs.dev/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vite 脚手架官网
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://router.vuejs.org/zh/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vue Router 4.x 路由
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://vuex.vuejs.org/zh/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vuex 4.x状态管理
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://pinia.vuejs.org/zh/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  pinia 新状态管理
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://element-plus.org/zh-CN/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Element Plus UI库
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://vant-contrib.gitee.io/vant/#/zh-CN" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vant 4 H5 UI库
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://www.typescriptlang.org/zh/play" target="_blank" rel="noopener noreferrer" class="nav-link external">
  TS演练场
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://ts.xcatliu.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  TS自学网站
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div><div class="nav-item"><a href="/renzi_89/interview/" class="nav-link router-link-active">
  Vue3面试题
</a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><a href="/renzi_89/interview/vue3" class="sidebar-heading clickable open active"><span>vue3常见面试题</span> <span class="arrow down"></span></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/renzi_89/interview/vue3.html" aria-current="page" class="active sidebar-link">VUE3 随堂面试题</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/renzi_89/interview/vue3.html#vue3-随堂面试题" class="sidebar-link">VUE3 随堂面试题</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/renzi_89/interview/vue3.html#_1-技术栈-用过哪些vue相关-ui组件库-js-cookie-qs-axios" class="sidebar-link">1.技术栈，用过哪些vue相关 UI组件库 (js-cookie  qs axios)</a></li><li class="sidebar-sub-header"><a href="/renzi_89/interview/vue3.html#_2-vue3-比-vue2的优点" class="sidebar-link">2.Vue3 比 Vue2的优点</a></li><li class="sidebar-sub-header"><a href="/renzi_89/interview/vue3.html#_3-vite与vue-cli区别-1-说他们的底层-2-现在企业使用场景" class="sidebar-link">3.vite与vue-cli区别 （1.说他们的底层 2.现在企业使用场景）</a></li><li class="sidebar-sub-header"><a href="/renzi_89/interview/vue3.html#_4-setup是什么" class="sidebar-link">4.setup是什么？</a></li><li class="sidebar-sub-header"><a href="/renzi_89/interview/vue3.html#_5-reactive-与-ref-是什么以及有什么区别" class="sidebar-link">5. reactive 与 ref 是什么以及有什么区别？</a></li><li class="sidebar-sub-header"><a href="/renzi_89/interview/vue3.html#_6-计算属性有几种写法-计算属性可以传参吗-vue2和3使用区别" class="sidebar-link">6. 计算属性有几种写法？ 计算属性可以传参吗？vue2和3使用区别？</a></li><li class="sidebar-sub-header"><a href="/renzi_89/interview/vue3.html#_7-监听器的使用vue2与3区别-常识" class="sidebar-link">7. 监听器的使用vue2与3区别（常识）</a></li><li class="sidebar-sub-header"><a href="/renzi_89/interview/vue3.html#_8-vue2和3使用防抖-优化-简历里面可写-网上很多说法都是错误的" class="sidebar-link">8. vue2和3使用防抖  --- 优化 -- 简历里面可写！！！ ---网上很多说法都是错误的</a></li><li class="sidebar-sub-header"><a href="/renzi_89/interview/vue3.html#_9-data为什么必须是一个函数-props针对复杂数据类型也为什么必须是函数返回一个数组或者对象" class="sidebar-link">9. data为什么必须是一个函数， props针对复杂数据类型也为什么必须是函数返回一个数组或者对象？</a></li><li class="sidebar-sub-header"><a href="/renzi_89/interview/vue3.html#_10-computed-method-watch-区别-和别的班级的-拔高点-回答深入一些" class="sidebar-link">10. computed method watch 区别？----- 和别的班级的 拔高点-回答深入一些</a></li><li class="sidebar-sub-header"><a href="/renzi_89/interview/vue3.html#_11-vue2-和-vue3的响应式原理" class="sidebar-link">11. Vue2 和 Vue3的响应式原理</a></li><li class="sidebar-sub-header"><a href="/renzi_89/interview/vue3.html#_12-vue3和vue2生命周期函数有什么区别" class="sidebar-link">12.  vue3和vue2生命周期函数有什么区别？</a></li><li class="sidebar-sub-header"><a href="/renzi_89/interview/vue3.html#_13-vue2里面父子组件的生命周期顺序" class="sidebar-link">13. vue2里面父子组件的生命周期顺序</a></li><li class="sidebar-sub-header"><a href="/renzi_89/interview/vue3.html#_14-props传递普通数据类型-和复杂数据类型" class="sidebar-link">14. props传递普通数据类型，和复杂数据类型</a></li><li class="sidebar-sub-header"><a href="/renzi_89/interview/vue3.html#_15-vue2与3的父子通信" class="sidebar-link">15. vue2与3的父子通信</a></li><li class="sidebar-sub-header"><a href="/renzi_89/interview/vue3.html#_16-props传递给子组件-子组件不更新的情况-vue2示例代码" class="sidebar-link">16. props传递给子组件，子组件不更新的情况 --- vue2示例代码</a></li><li class="sidebar-sub-header"><a href="/renzi_89/interview/vue3.html#_17-vue2-与-vue3-父子孙-传值方式-vue2中内置组件访问方法" class="sidebar-link">17. vue2 与 vue3 父子孙 传值方式 --  vue2中内置组件访问方法 ？</a></li><li class="sidebar-sub-header"><a href="/renzi_89/interview/vue3.html#_19-vue3里面一个对象没有通过ref和reactive包装-也可以有响应式的效果吗" class="sidebar-link">19. vue3里面一个对象没有通过ref和reactive包装，也可以有响应式的效果吗？</a></li><li class="sidebar-sub-header"><a href="/renzi_89/interview/vue3.html#_20-vue更新dom是异步的-nexttick" class="sidebar-link">20. vue更新dom是异步的 -- nextTick</a></li><li class="sidebar-sub-header"><a href="/renzi_89/interview/vue3.html#_21-toref-和-torefs的使用场景-难-了解即可-vue3的内容-或者是这个问题-defineprops传值使用-ref-响应式失效" class="sidebar-link">21.toRef 和 toRefs的使用场景 （难--了解即可，vue3的内容）--- 或者是这个问题： defineProps传值使用 ref 响应式失效</a></li><li class="sidebar-sub-header"><a href="/renzi_89/interview/vue3.html#v-model的语法糖" class="sidebar-link">v-model的语法糖</a></li><li class="sidebar-sub-header"><a href="/renzi_89/interview/vue3.html#_21-v-model在vue2和vue3里面的原理及区别" class="sidebar-link">21. v-model在vue2和vue3里面的原理及区别</a></li></ul></li></ul></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h2 id="vue3-随堂面试题"><a href="#vue3-随堂面试题" class="header-anchor">#</a> VUE3 随堂面试题</h2> <blockquote><p>可以参考的一些面试题答案， vue3上课比掌握的面试题</p></blockquote> <h3 id="_1-技术栈-用过哪些vue相关-ui组件库-js-cookie-qs-axios"><a href="#_1-技术栈-用过哪些vue相关-ui组件库-js-cookie-qs-axios" class="header-anchor">#</a> 1.技术栈，用过哪些vue相关 UI组件库 (js-cookie  qs axios)</h3> <p>vue2：element-ui（后台管理） ant-design-vue（后台管理https://2x.antdv.com/docs/vue/introduce-cn）  vant-ui（移动端） ArcoDesign（字节后台管理 https://arco.design/） TDesign（腾讯企业级设计 https://tdesign.tencent.com/） Naive UI（尤玉溪推荐  内置 80+组件 https://www.naiveui.com/zh-CN/os-theme）</p> <p>vue3： element-plus（后台管理）  ant-design-vue (后台管理)  vant-ui（移动端）</p> <p>小程序： 采用uni-app 框架才能使用 uview-ui这个框架，还有 vant-ui</p> <h3 id="_2-vue3-比-vue2的优点"><a href="#_2-vue3-比-vue2的优点" class="header-anchor">#</a> 2.Vue3 比 Vue2的优点</h3> <blockquote><p>proxy + defineProperty， ts， 组合式api</p></blockquote> <ol><li>底层数据响应式原理重新实现（ES6 proxy 替代了 ES5 的 Object.defineProperty）</li> <li>全面采用ts，更好的类型推导</li> <li>提供了组合式api，更适合大型项目； vue2组件复用一般才有mixin，有缺陷，一般在中小型项目里面。 vue2采用的是选项式api</li></ol> <p>（以前大公司里面 react开发大型项目， vue2中小型项目开发（项目大了以后，组件不是很好复用）vue3改进了以后，比较适合开发大型项目）</p> <h3 id="_3-vite与vue-cli区别-1-说他们的底层-2-现在企业使用场景"><a href="#_3-vite与vue-cli区别-1-说他们的底层-2-现在企业使用场景" class="header-anchor">#</a> 3.vite与vue-cli区别 （1.说他们的底层 2.现在企业使用场景）</h3> <blockquote><p>vite--ESM 浏览器原生模块，不需要打包，所以快</p> <p>vue-cli  webpack 生态比较全，现在公司用的多，打包稍微慢一点</p></blockquote> <p>(vue-cli可以创建vue2 3的项目  vite可以创建 vue3，react项目)</p> <ol><li>vue-cli --- 底层依赖于 webpack -- 开发的时候，webpack会给你打包，项目大了以后，启动速度就很慢</li></ol> <p>vite - 开发环境： 依赖于 浏览器原生 es6 modules-- 不需要打包； 生产环境依赖于 rollup打包构建</p> <ol><li>vue-cli 既可以开发vue2 也可以开发vue3项目- 但是官网不推荐。 开发vue3官方推荐使用vite，更快的启动速度</li> <li>很多大企业，还是使用vue-cli； 因为底层依赖于webpack，这个出现了很多年，周边的一些生态（webpack的一些工具，很多人在开发，比较成熟）。 vite出现时间短，生态比较少（网上的一些周边插件比较少，所以现在大公司还是 webpack为主）</li> <li>vite 既可以开发 vue 也可以开发react。 webpack也是既可以开发 vue，也可以开发react</li></ol> <p><strong>vue-cli底层是什么？ 为什么看不见webpack.config.js文件？</strong> （非面试题，自己的基本常识）</p> <blockquote><p>vue2项目 依赖于 vue-cli 脚手架创建， 这个脚手架底层又是依赖于webpack， 而webpack开发项目，又是需要自己配置一些loader plugin等等参数，但是项目里面没有webpack.config.js文件， 只有 vue.config.js文件，因为vue-cli脚手架给我把webpack封装起来了。</p> <p>如果你硬要看webpack的配置文件， 在vue-cli的项目，直接输入 vue inspect 可以查看 vue.config.js 编译为 webpack.config.js文件以后的 内容</p></blockquote> <p><strong>vue2 3 文件的区别</strong>（非面试题，自己常识）</p> <ol><li><p>index.html vue2在public文件夹里面， vue3在 src文件夹的外面</p></li> <li><p>入口文件main.js， vue2是new Vue 构造函数，里面绑定App根组件</p> <p>vue3 是 createApp这个函数，函数的参数是一个App根组件，</p></li> <li><p>vue2的vscode的插件 vetur。 但是vue3的插件是 volar。 开发vue3项目，需要禁用</p></li> <li><p>vue3 可以有多个元素并排，不一定只有一个根元素root。 vue2只能有一个根元素</p></li> <li><p>vue3项目里面可以写 vue2的语法，可以加选项式api，但是不推荐</p></li> <li><p>自己在vscode里面，配置一些代码片段，提升开发效率， 以前配置过 try...catch的片段（点击左下角的齿轮按钮，点击配置用户代码片段，把刚刚那个json复制进去）</p></li> <li><p>因为vue3 发布了很久了，最开始的语法，比较繁琐，然后经过两年的更新，我们就使用的是新语法， script标签上面，添加 setup属性， 不用在return导出了，js里面的变量，外面可以直接看见</p></li></ol> <h3 id="_4-setup是什么"><a href="#_4-setup是什么" class="header-anchor">#</a> 4.setup是什么？</h3> <p>1.是vue3，钩子函数（生命周期函数），代替了以前vue2的 beforeCreated和created两个钩子函数</p> <p>2.这个函数里面不能访问 this值，在这个函数里面写一些钩子函数，需要手动从vue里面导入进来，写了setup，就不要使用vue2的哪一种 选项式的api，</p> <h3 id="_5-reactive-与-ref-是什么以及有什么区别"><a href="#_5-reactive-与-ref-是什么以及有什么区别" class="header-anchor">#</a> 5. reactive 与 ref 是什么以及有什么区别？</h3> <p>1.ref，定义响应式数据的一个方法，在就是里面访问值，需要.value，在html模板里面，不需要.value</p> <p>2.如果是普通数据类型，我们一般使用ref定义，如果是复杂数据类型，我们采用reactive进行包裹，让对象具有响应式。 但是ref也可以定义复杂数据类型</p> <p>（vue2里面，数据只需要写到data上面，vue的底层代码，Object.definedProperty会把data上面的所有数据，自动转换为响应式数据。 vue3不行，需要我们通过ref reactive这两个函数，手动去转换普通数据类型和复杂数据类型，为响应式数据）</p> <blockquote><p>vue2里面做过哪些优化 ！！！</p></blockquote> <p>1.你说我之前在写vue代码的时候，对于使用元素dom绑定事件，和原生js的定时器的时候。需要在destroyed钩子函数里面，将dom事情移除removeEventListener，以及定时器移除clearInterval</p> <p>2.还做过一些优化，就是有些数据例如 定时器的返回值timerId，这样的数据，不需要进行页面渲染，我们只是在销毁的钩子函数里面使用以下，这个时候就不需要定义到data上面，增加系统负担，因为this是一个对象，只要给他添加一个属性即可。减少不必要的 数据响应式处理</p> <blockquote><p>vue3组合式api的 使用方式，自定义两个方法导出，抽离封装一个具体的功能性模块</p></blockquote> <h3 id="_6-计算属性有几种写法-计算属性可以传参吗-vue2和3使用区别"><a href="#_6-计算属性有几种写法-计算属性可以传参吗-vue2和3使用区别" class="header-anchor">#</a> 6. 计算属性有几种写法？ 计算属性可以传参吗？vue2和3使用区别？</h3> <p>1.有两种写法，一种是默认的 get方法，直接函数里面写return</p> <p>还有一种是有get  set两种写法，设置set的时候，可以更改另一个属性的值</p> <div class="language- extra-class"><pre class="language-text"><code>// vue3 计算属性 第一种写法 (就叫get方法，没有set)
const nextAge = computed(() =&gt; {
  // 字符串转数字： +  Number  parseInt  parseFloat
  return +age.value + 1
})

// // vue3 计算属性 第二种写法， 带有set参数，可以设置
const afterAge = computed({
  get() {
    return +age.value + 2
  },
  set(val) {
    age.value = val - 2
  }
})
</code></pre></div><ol><li><p>计算属性可以传参，是通过函数返回一个函数的形式，可以自定义各种数据显示</p> <p>计算属性vue2 3 都可以传参，只要依赖的数据不发生改变，依然有缓存。可以按需做一些动态的数据显示</p></li></ol> <div class="language- extra-class"><pre class="language-text"><code>&lt;div&gt;{{ selfAge(2025, '20k') }}&lt;/div&gt;
&lt;div&gt;{{ selfAge(2027, '25k') }}&lt;/div&gt;
&lt;div&gt;{{ selfAge(2030, '35k') }}&lt;/div&gt;

const selfAge = computed(() =&gt; {
  console.log('虽然传递了参数，但是age.value值没有改变，依然会走缓存，上面调用三次，这里只会执行一次，因为age.value没有发生变化');
  return function(a, b) {
    return a + '年我' + age.value + '希望月薪' + b
  }
})
</code></pre></div><ol><li><p>和vue2的区别</p> <p>vue2是通过 computed 选项 配置来写的</p> <p>vue3需要导入一个函数</p></li></ol> <blockquote><p>字符串转换数字的几种方法
<code>+ Number parseInt parseFloat</code></p></blockquote> <h3 id="_7-监听器的使用vue2与3区别-常识"><a href="#_7-监听器的使用vue2与3区别-常识" class="header-anchor">#</a> 7. 监听器的使用vue2与3区别（常识）</h3> <p>vue2和vue3的写法不一样，一个是配置，一个是导入一个watch函数</p> <p>还有vue3监听的时候，可以传递一个数组，监听多个属性。</p> <p>多了几个watchEffect相关的函数</p> <h3 id="_8-vue2和3使用防抖-优化-简历里面可写-网上很多说法都是错误的"><a href="#_8-vue2和3使用防抖-优化-简历里面可写-网上很多说法都是错误的" class="header-anchor">#</a> 8. vue2和3使用防抖  --- 优化 -- 简历里面可写！！！ ---网上很多说法都是错误的</h3> <p>1.vue里面防抖一般使用在 watch 和 method上面 （防抖是 单位时间以内，只执行最后一次函数，一般用在搜索框的优化上面）</p> <p>2.一般有两种写法</p> <p>第一种：在created里面，在this上定义一个新函数，接受debounce的返回值</p> <p>第二种方法：在methods里面定义方法的时候，不推荐 -- 因为如果这个组件在当前页面使用的多次，那么防抖可能出现故障 ---这个就类似于 data为什么必须一个函数的问题，组件每次新建，都必须是一个新地址，防抖函数也不例外</p> <p>3.关于防抖的优化 （提高点）</p> <p>优化watch的调用，还需要注意在 离开当前组件之前，最后一次防抖函数需要手动调用cancel取消，或者flush立即执行</p> <p>（在destroyed钩子函数里面， 已经有三个优化了： remove 事件绑定，clearInterval清除定时器， 取消防抖的函数执行）</p> <div class="language- extra-class"><pre class="language-text"><code>vue3 里面定义方法的时候，直接在setup里面使用 防抖函数包裹一下
const valueChnage = _.debounce(() =&gt; {
  console.log(val.value);
}, 500)
</code></pre></div><div class="language- extra-class"><pre class="language-text"><code>vue2里面有两种方法
第一种：
在created里面，在this上定义一个新函数，接受debounce的返回值
created () {
  this.debounceInput = this.debounce(this.handle, 1000,false)
}

第二种方法：
在methods里面定义方法的时候，不推荐 -- 因为如果这个组件在当前页面使用的多次，那么防抖可能出现故障 ---这个就类似于 data为什么必须一个函数的问题，组件每次新建，都必须是一个新地址，防抖函数也不例外
changeValue: _.debounce((e) =&gt; {
  console.log(e, this);
}, 500)
</code></pre></div><h3 id="_9-data为什么必须是一个函数-props针对复杂数据类型也为什么必须是函数返回一个数组或者对象"><a href="#_9-data为什么必须是一个函数-props针对复杂数据类型也为什么必须是函数返回一个数组或者对象" class="header-anchor">#</a> 9. data为什么必须是一个函数， props针对复杂数据类型也为什么必须是函数返回一个数组或者对象？</h3> <p>如果组件复用了多次， data不是一个函数的话，那么多个相同组件使用的data就是同一个地址，那么修改一个组件就会到导致其他组件 的数据也发生改变，就会产生bug</p> <p>（上面回答完以后，你接下来再说）我们还有父向子传值的时候，对于复杂数据类型props定义默认值的时候，也是需要写一个函数，返回给一个新地址的形式，不能直接写对象或者数组，因为是同一个地址</p> <div class="language- extra-class"><pre class="language-text"><code>props: {
  list: {
    type: Array,
    // default: []
    default: () =&gt; []
  }
},
</code></pre></div><h3 id="_10-computed-method-watch-区别-和别的班级的-拔高点-回答深入一些"><a href="#_10-computed-method-watch-区别-和别的班级的-拔高点-回答深入一些" class="header-anchor">#</a> 10. computed method watch 区别？----- 和别的班级的 拔高点-回答深入一些</h3> <blockquote><p>缓存， 业务， 监听</p></blockquote> <p>methods：执行n次，运行n次函数 --- 强调函数调用。methods 方法表示一个具体的操作，主要书写业务逻辑
computed： 页面中有某些数据依赖其他数据进行变动的时候，可以使用计算属性。比如以前使用过滤器，现在vue3没有了，我们就可以用计算属性代替。 而且他有最重要的特性，有缓存。有些情况下，调用computed中函数n次，如果依赖数据没有变化，只会执行一次函数，因为使用的缓存里面的数据，不用调用函数 -- 强调属性调用。但是利用返回函数的形式，也可以在模板上调用并传参 <strong>计算属性可以传参</strong>
watch：类似于监听+事件的机制， 监听的值一旦发生改变，就执行后面的回调函数。 一遍用来监听data props $route等参数的变化</p> <p>总结：大部分情况下watch和computed几乎没有差别。但如果要在数据变化的同时进行异步操作或者是比较大的开销，那么watch是最佳选择。watch可以看作是 computed 和 methods 的结合体</p> <h3 id="_11-vue2-和-vue3的响应式原理"><a href="#_11-vue2-和-vue3的响应式原理" class="header-anchor">#</a> 11. Vue2 和 Vue3的响应式原理</h3> <blockquote><p>使用proxy代替defineProperty</p></blockquote> <p><code>Vue2</code>是通过数据劫持的方式来实现响应式的，其中最核心的方法便是通过<code>Object.defineProperty()</code>来实现对属性的劫持，该方法允许精确地添加或修改对象的属性，对数据添加属性描述符中的<code>getter</code>与<code>setter</code>存取描述符实现劫持。<code>Vue2</code>之所以只能兼容到<code>IE8</code>主要就是因为<code>defineProperty</code>无法兼容<code>IE8</code>，其他浏览器也会存在轻微兼容问题。</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">var</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">__x</span><span class="token operator">:</span> <span class="token number">1</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
Object<span class="token punctuation">.</span><span class="token function">defineProperty</span><span class="token punctuation">(</span>obj<span class="token punctuation">,</span> <span class="token string">&quot;x&quot;</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
    <span class="token function-variable function">set</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">x</span><span class="token punctuation">)</span><span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;watch&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>__x <span class="token operator">=</span> x<span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function-variable function">get</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>__x<span class="token punctuation">;</span> <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
obj<span class="token punctuation">.</span>x <span class="token operator">=</span> <span class="token number">11</span><span class="token punctuation">;</span> <span class="token comment">// watch</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>obj<span class="token punctuation">.</span>x<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 11</span>
</code></pre></div><p><code>Vue3</code>使用<code>Proxy</code>实现数据劫持，<code>Object.defineProperty</code>只能监听属性，而<code>Proxy</code>能监听整个对象，通过调用<code>new Proxy()</code>，可以创建一个代理用来替代另一个对象被称为目标，这个代理对目标对象进行了虚拟，因此该代理与该目标对象表面上可以被当作同一个对象来对待。代理允许拦截在目标对象上的底层操作，而这原本是<code>Js</code>引擎的内部能力，拦截行为使用了一个能够响应特定操作的函数，即通过<code>Proxy</code>去对一个对象进行代理之后，我们将得到一个和被代理对象几乎完全一样的对象，并且可以从底层实现对这个对象进行完全的监控。<code>Proxy</code>对象是<code>ES6</code>引入的新特性，<code>Vue3</code>放弃使用了<code>Object.defineProperty</code>，而选择了使用更快的原生<code>Proxy</code>，即是在兼容性方面更偏向于现代浏览器。</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">var</span> target <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token literal-property property">a</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> proxy <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Proxy</span><span class="token punctuation">(</span>target<span class="token punctuation">,</span> <span class="token punctuation">{</span>
    <span class="token function-variable function">set</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">target<span class="token punctuation">,</span> key<span class="token punctuation">,</span> value<span class="token punctuation">,</span> receiver</span><span class="token punctuation">)</span><span class="token punctuation">{</span> 
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;watch&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">return</span> Reflect<span class="token punctuation">.</span><span class="token function">set</span><span class="token punctuation">(</span>target<span class="token punctuation">,</span> key<span class="token punctuation">,</span> value<span class="token punctuation">,</span> receiver<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function-variable function">get</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">target<span class="token punctuation">,</span> key<span class="token punctuation">,</span> receiver</span><span class="token punctuation">)</span><span class="token punctuation">{</span> 
        <span class="token keyword">return</span> target<span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
proxy<span class="token punctuation">.</span>a <span class="token operator">=</span> <span class="token number">11</span><span class="token punctuation">;</span> <span class="token comment">// watch</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>target<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// { a: 11 }</span>
</code></pre></div><h3 id="_12-vue3和vue2生命周期函数有什么区别"><a href="#_12-vue3和vue2生命周期函数有什么区别" class="header-anchor">#</a> 12.  vue3和vue2生命周期函数有什么区别？</h3> <p>vue3组合式api取消了beforeCreated和created钩子函数， 采用setup钩子函数代替，且里面不能使用this</p> <p>vue3里面的组件销毁的钩子函数换成了beforeUnmount和unmounted 之前是destroyed</p> <p>但是要注意，如果vue3使用vue2的选项式写法，之前的钩子函数还是可以使用</p> <p>vue3的组合式api生命周期函数 要比 vue2选项式 API 的的生命周期函数 多个前缀 on，而且要单独引入</p> <h3 id="_13-vue2里面父子组件的生命周期顺序"><a href="#_13-vue2里面父子组件的生命周期顺序" class="header-anchor">#</a> 13. vue2里面父子组件的生命周期顺序</h3> <p>创建： 父beforeCreate-&gt;父created-&gt;父beforeMount-&gt;子beforeCreate-&gt;子created-&gt;子beforeMount-&gt;子mounted-&gt;父mounted</p> <p>更新： 父beforeUpdate-&gt;子beforeUpdate-&gt;子updated-&gt;父updated</p> <p>销毁： 父beforeDestroy-&gt;子beforeDestroy-&gt;子destroyed-&gt;父destroyed</p> <p>vue3：  父setup -&gt; 父onBeforeMount -&gt; 子setup -&gt;子onBeforeMount -&gt; 子onMounted-&gt; 父onMounted  （记住父最后挂载到页面上）</p> <h3 id="_14-props传递普通数据类型-和复杂数据类型"><a href="#_14-props传递普通数据类型-和复杂数据类型" class="header-anchor">#</a> 14. props传递普通数据类型，和复杂数据类型</h3> <p>vue是单向数据流，只能父组件修改数据，同步给子组件。子组件是不能修改父组件的数据的。</p> <p>但是如果父向子传值是复杂数据类型，那么在子组件里面 修改 复杂数据类型的某个属性，是可以的，vue不会给你报错，也不会有警告，只有当我们把对象的地址进行了修改，vue才会提示我们，子组件不能修改父组件的值</p> <h3 id="_15-vue2与3的父子通信"><a href="#_15-vue2与3的父子通信" class="header-anchor">#</a> 15. vue2与3的父子通信</h3> <p>vue3的父子通信</p> <p>父向子</p> <ol><li>通过v-bind绑定属性，将父组件数据传递给子组件</li> <li>子组件通过 defineProps 定义一个属性，接受父组件传递过来的值</li></ol> <p>子向父</p> <ol><li>子组件通过defineEmit 定义一个事件类型，然后再方法里面通过emits('事件名称', 参数)  通知父组件去修改</li> <li>在父组件的模板上面 通过 @自定义事件='父组件函数' 监听子组件触发的函数</li> <li>在父组件的函数里面，更新父组件自己的数据</li></ol> <p>vue2</p> <p>父向子传值</p> <ol><li>在父组件里面，给子组件上面绑定属性，可以传递静态的值，也可以传递变量，就是通过v-bind</li> <li>在子组件里面，通过props，接受父组件传递过来的数据。（这个地方vue3改变很大，需要通过defineProps来定义 props属性）</li></ol> <h3 id="_16-props传递给子组件-子组件不更新的情况-vue2示例代码"><a href="#_16-props传递给子组件-子组件不更新的情况-vue2示例代码" class="header-anchor">#</a> 16. props传递给子组件，子组件不更新的情况 --- vue2示例代码</h3> <p>我们将子组件传递进来的数据， 做一个拷贝，在子组件的data上面，定义一个子组件自己的数据，然后将父组件传递进来的数据，作为改数据的初始值</p> <p>这个时候 data数据，是子组件自己的，那么我们改变自己data上面的数据，是不会报错的</p> <p>这时可以通过watch函数监听，和父组件的数据保持同步</p> <h3 id="_17-vue2-与-vue3-父子孙-传值方式-vue2中内置组件访问方法"><a href="#_17-vue2-与-vue3-父子孙-传值方式-vue2中内置组件访问方法" class="header-anchor">#</a> 17. vue2 与 vue3 父子孙 传值方式 --  vue2中内置组件访问方法 ？</h3> <ol><li>最原始的 父组件传递给子组件，子组件定义props接收，最后子组件再将这个数据传递给孙子组件</li> <li>provide + inject -- 一个组件提供数据，下面的子孙等组件那个需要，就通过inject注入</li> <li>$root找根组件， $parent 找当前组件的父组件， 这两种方式不推荐使用，因为会限制组件的使用场景</li> <li>vue2 和 vue3 都有 provide 和 inject， 仅仅语法格式不一样</li> <li>ref -- 获取页面上 dom元素，或者组件实例。 只不过vue3里面，需要子组件手动向外抛出defineExpose一些数据，外面才能使用
<ol><li>vue2的写法  在页面上 直接写 ref=&quot;aa&quot;, 在js里面 通过this.$refs.aa.xxx</li> <li>vue3的写法 定义一个ref值 const aa = ref(); 在html上面 通过 ref=&quot;aa&quot;绑定； js里面，通过aa.value 访问组件或者dom元素</li></ol></li></ol> <h3 id="_19-vue3里面一个对象没有通过ref和reactive包装-也可以有响应式的效果吗"><a href="#_19-vue3里面一个对象没有通过ref和reactive包装-也可以有响应式的效果吗" class="header-anchor">#</a> 19. vue3里面一个对象没有通过ref和reactive包装，也可以有响应式的效果吗？</h3> <p>可以，但是有前提条件</p> <p>我们可以在一个函数里面，写一个另一个响应式数据的改变，然后再把非响应式数据进行更改，这样在响应式数据触发页面更新的时候，顺带着会更新我们非响应式的对象数据</p> <div class="language- extra-class"><pre class="language-text"><code>const obj = {
    name: '我不是响应式对象上的属性'
}
const num = ref(1)

const updateList = () =&gt; {
    num.value++ // num是响应式数据，他一改变就会触发页面更新，因为我们的obj上面的值在js里面也发生了改变
    // 所以 页面更新的时候，就会自动读取最新的obj的值，obj就看起来像响应式数据一样，其实不是
    obj.name+= '$'
}
</code></pre></div><h3 id="_20-vue更新dom是异步的-nexttick"><a href="#_20-vue更新dom是异步的-nexttick" class="header-anchor">#</a> 20. vue更新dom是异步的 -- nextTick</h3> <ol><li>当你在 Vue 中更改响应式状态时，最终的 DOM 更新并不是同步生效的，而是由 Vue 将它们缓存在一个队列中，（只要侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更），直到下一个事件循环才一起执行。这样是为了确保每个组件无论发生多少状态改变，都仅执行一次更新 -- 提升效率</li> <li><code>nextTick()</code> 可以在状态改变后立即使用，以等待 DOM 更新完成。你可以传递一个回调函数作为参数，或者 await 返回的 Promise</li> <li>工作里面也可以使用setTime（宏任务）， promise是微任务</li> <li>不用说，自己记忆： 怎么样比喻宏任务和微任务。 假设你在银行办业务， 你后面有5个人排队，5个人就是宏任务，。你自己有存取，买理财，买基金等等 这个是你自己的微任务</li></ol> <div class="language- extra-class"><pre class="language-text"><code>const add = () =&gt; {
  count.value++
  count.value++
  count.value++
  count.value++
  console.log(1,document.querySelector('.box').innerText);

  nextTick(() =&gt; {
    console.log(2,document.querySelector('.box').innerText);
  })
}

</code></pre></div><blockquote><p>ref 与 reactive 区别 -- 高级回答 （了解即可）</p></blockquote> <p>ref: 如果使用的是基本类型响应式依赖Object.defineProperty( )，如果ref使用的是引用类型，底层ref会借助reactive的proxy 定义响应式</p> <p>reactive:  参数只接受引用类型，基于Es6的Proxy实现， <code>ref</code> 本质也是 <code>reactive</code>，<code>ref(obj)</code>等价于 <code>reactive({value: obj})</code></p> <p>一般选择ref， 如果选择reactive，可以使用<strong>toRefs进行导出到页面使用</strong></p> <p><strong>const</strong> { a, b, c } = <strong>toRefs</strong>(state)</p> <h3 id="_21-toref-和-torefs的使用场景-难-了解即可-vue3的内容-或者是这个问题-defineprops传值使用-ref-响应式失效"><a href="#_21-toref-和-torefs的使用场景-难-了解即可-vue3的内容-或者是这个问题-defineprops传值使用-ref-响应式失效" class="header-anchor">#</a> 21.toRef 和 toRefs的使用场景 （难--了解即可，vue3的内容）--- 或者是这个问题： defineProps传值使用 ref 响应式失效</h3> <p>1.toRef可以为响应式源对象上 某一个 属性新创建一个 ref，这个值会保持其源属性的响应式连接</p> <p>2.toRefs可以为整个源对象，创建响应式连接，也可以进行解构，包装该对象每一个属性都是响应式的</p> <ol><li>一般用在父组件向子组件传递 props的值的时候，</li></ol> <div class="language- extra-class"><pre class="language-text"><code>&lt;template&gt;
	&lt;div&gt;{{ msg }}&lt;/div&gt;
&lt;/template&gt;
&lt;script setup&gt;
import { ref } from &quot;vue&quot;;
// 接受来自父组件的传参
const props = defineProps({
  data: String,
});
const msg = ref(props.data); //这样写代码 msg和父组件的data就失去了响应式的连接了

此时父组件改变 data 的值，子组件 msg 无法响应 data 的变化。
因为 ref 是对传入数据的拷贝，原始值 data 的改变并不影响 msg
但 toRef 是对传入数据的引用，原始值 data 改变会影响 msg

正确做法：
// 方法1：
const msg = toRef(props, 'data');
// 方法2：
const { data } = toRefs(props);

</code></pre></div><h3 id="v-model的语法糖"><a href="#v-model的语法糖" class="header-anchor">#</a> v-model的语法糖</h3> <p>原生元素和自定义组件</p> <h3 id="_21-v-model在vue2和vue3里面的原理及区别"><a href="#_21-v-model在vue2和vue3里面的原理及区别" class="header-anchor">#</a> 21. v-model在vue2和vue3里面的原理及区别</h3> <blockquote><p>v-model 的好处就是 父组件不用写 v-bind，也不用写@监听一个事件，也不用在父组件里面定义一个方法，去修改父组件的值。v-model自动给我们都做好了</p></blockquote> <p>vue3里面</p> <p>1.默认情况下，<code>v-model</code> 在组件上都是使用 <code>modelValue</code> 作为 prop，并以 <code>update:modelValue</code> 作为对应的事件</p> <p>2.也可以给 <code>v-model</code> 指定一个参数来更改这些名字， 这样一个组件上面，就可以使用多个v-model</p> <p>vue2里面</p> <ol><li>一个组件只能使用哪一个v-model， 语法糖就是 value属性作为props，事件就是input事件</li></ol> <div class="language- extra-class"><pre class="language-text"><code>原生元素上面
&lt;input v-model=&quot;searchText&quot; /&gt;

&lt;input
  :value=&quot;searchText&quot;
  @input=&quot;searchText = $event.target.value&quot;
/&gt;

自定义组件上面使用v-model
&lt;CustomInput v-model=&quot;searchText&quot; /&gt;
会被转换为下面的形式 （语法糖）
&lt;CustomInput
  :modelValue=&quot;searchText&quot;
  @update:modelValue=&quot;newValue =&gt; searchText = newValue&quot;
/&gt;

绑定多个v-model
&lt;UserName
  v-model:first-name=&quot;first&quot;
  v-model:last-name=&quot;last&quot;
/&gt;

</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <!----> </main></div><div class="global-ui"><!----></div></div>
    <script src="/renzi_89/assets/js/app.a378f438.js" defer></script><script src="/renzi_89/assets/js/3.2ef7cd9f.js" defer></script><script src="/renzi_89/assets/js/24.51725349.js" defer></script>
  </body>
</html>
